<script lang="ts" setup>
import { AuthenticationLogin } from '@vben/common-ui';

import { useAuthStore } from '#/store';
import { reactive, ref, onMounted, h} from 'vue';
import { uctoo_wechatopen, uctoo_wechatpay_transaction, uctoo_minishop_order } from '#/store';
import type { MinishopOrder, MinishopOrderResponse } from '../minishop_order/types.ts';
import { useRepo } from 'pinia-orm';
import { useAxiosRepo } from '@pinia-orm/axios';
import { useRoute, useRouter } from 'vue-router';
import { message , Modal} from 'ant-design-vue';
import { $t } from '@vben/locales';
import { WechatJssdk } from '@hairy/wechat-jssdk';
// 获取当前路由信息
const route = useRoute();
const router = useRouter();
// 获取查询字符串部分
let queryParams = reactive({ ...route.query });
defineOptions({ name: 'UnipayWechatJSSDK' });

interface WxPayParams {
  timestamp: number;    // 支付签名时间戳
  nonceStr: string;     // 支付签名随机串
  package: string;      // 统一下单接口返回的 prepay_id
  signType: "MD5"|"HMAC-SHA256"; // 签名方式
  paySign: string;      // 支付签名
}
const currentRecord = ref<MinishopOrder | null>(null);
const authStore = useAuthStore();
const showVerifyCode = ref(true);

function openTabWithParams(id: string) {
  // 这里就是路由跳转，也可以用path
  const params = { id: id };
  router.push({ name: 'UnipaySuccess', state: { params } });
}

onMounted(async () => {
  console.log(queryParams);
    const isWeChat = () => {
    const ua = navigator.userAgent.toLowerCase()
      return ua.includes('micromessenger')
    }

  if (isWeChat()) {
    const jsApiList = ['chooseImage', 'updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'];
    const openTagList = ['wx-open-launch-app', 'wx-open-launch-weapp', 'wx-open-subscribe'];
    const timestamp = Date.now();

    const postData = {appid: import.meta.env.VITE_WEBSITE_APPID, jsApiList: JSON.stringify(jsApiList), openTagList: JSON.stringify(openTagList),timestamp: timestamp, url: window.location.href, debug: true};
    const res = await useAxiosRepo(uctoo_wechatopen).api().createJssdkConfig(postData)
    console.log('支付信息:', res.response)
    if (res && res.response.data) {
      
      // 初始化jssdk
      //window.location.href = res.response.data.h5_url;
      const wxJssdk = new WechatJssdk({
        requestConfig: async () => {
          return {
            appId: import.meta.env.VITE_WEBSITE_APPID,
            jsApiList: ['chooseImage', 'updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'],
            nonceStr: res.response.data.nonceStr,
            signature:  res.response.data.signature,
            timestamp: timestamp
          }
        }
      })
      
      
    /*  wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: import.meta.env.VITE_WEBSITE_APPID, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: res.response.data.nonceStr, // 必填，生成签名的随机串
        signature: res.response.data.signature,// 必填，签名
        jsApiList: ['chooseImage', 'updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'] // 必填，需要使用的JS接口列表
      }); */

      // 从服务端获取支付参数（关键安全步骤！）

      //从路由中获取订单号，查询订单数据
     const orderData = await useAxiosRepo(uctoo_minishop_order).api().getuctooMinishopOrder(queryParams.order_id); //返回值自动更新models中订单数据

    
    const data = {user_type: 'uctoo_user', client_id:queryParams.client_id , ...orderData.response.data} 
    console.log('提交的数据:', data);
    const jsapiConfig = await useAxiosRepo(uctoo_wechatpay_transaction).api().payTransactionsJSAPI(data);
    const payParams: WxPayParams = jsapiConfig.response.data;
    console.log('支付参数:', payParams);
    // 调起微信支付 
    wx.ready(() => {
      wx.chooseWXPay({
        ...payParams,
        success: (res: any) => {
          if (res.errMsg === "chooseWXPay:ok") {
            // 支付成功逻辑（建议服务端验证支付结果）
            alert('支付成功！');
            // 跳转到订单支付成功页面
            openTabWithParams(String(queryParams.order_id))
          } else {
            alert('支付失败：' + res.errMsg);
          }
        },
        fail: (err: any) => {
          console.error('支付异常:', err);
          alert('支付过程中发生错误');
        }
        });
      });

      // 配置错误监听
      wx.error((err: any) => {
        console.error('微信配置失败:', err);
      //  alert('微信支付初始化失败，请刷新页面');
      });
    } else {
     // message.error('调起微信支付操作失败');
    }
    
  } else {
    console.error('isWeChat：', isWeChat())
    
    // 微信外场景只能用 H5支付通道
  }
});
</script>

<template>
  
</template>
